<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5></h5>
                    <div class="ibox-tools">
                    {{/*<a class="collapse-link">*/}}
                            {{/*<i class="fa fa-chevron-up"></i>*/}}
                        {{/*</a>*/}}
                        {{/*<a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">*/}}
                            {{/*<i class="fa fa-wrench"></i>*/}}
                        {{/*</a>*/}}
                        {{/*<ul class="dropdown-menu dropdown-user">*/}}
                            {{/*<li><a href="table_basic.html#">选项1</a>*/}}
                            {{/*</li>*/}}
                            {{/*<li><a href="table_basic.html#">选项2</a>*/}}
                            {{/*</li>*/}}
                        {{/*</ul>*/}}
                        {{/*<a class="close-link">*/}}
                            {{/*<i class="fa fa-times"></i>*/}}
                        {{/*</a>*/}}
                    </div>
                </div>
                <div class="ibox-content">
                    <form class="row" id="searchForm">
                        <div class="col-sm-3">
                            <div class="input-group">
                                <input type="text" placeholder="请输入关键词" class="input-md form-control" name="keyWord"
                                       id="keyWord">
                                <span
                                        class="input-group-btn">
                                        <button type="button" class="btn btn-md btn-primary"
                                                onclick="refresh()"> 搜索</button>
                                <button type="reset" class="btn btn-md btn-primary" style="margin-left: 10px"
                                        name="resetBtn"> 重置</button> </span>
                            </div>
                        </div>

                        <div class="col-sm-2 pull-right" style="text-align: right">
                            <button type="button" class="btn btn-md btn-primary" id="addBtn"> 添加</button>
                        </div>
                    </form>
                    <div class="table-responsive">

                        <table id="table" class="table table-striped" data-mobile-responsive="true"></table>

                    </div>

                </div>
            </div>
        </div>

    </div>
</div>


</body>

{{define "admin/product/type-lists-footer"}}

<script>

    var config = {};
    config.url = '/admin/product/type/list';


    config.columns = [ //字段

        {title: '序号', field: 'Id', align: 'center', valign: 'middle'},
        {title: '名称', field: 'Title', align: 'center', valign: 'middle'},
        {
            title: '图片', field: 'Image', align: 'center', valign: 'middle',

            formatter: function (value) {
                return (
                        '<img src="' + value + '" style="width: 40px;height: 40px">'
                )
            }
        },
        {title: '创建时间', field: 'CreatedAt', align: 'center', valign: 'middle'},
        {
            title: '操作', field: 'Id', align: 'center', valign: 'middle',
            formatter: function (value) {
                return (
                        '<a href="javascript: void(0);" onclick="units.modify(this,' + value + ')">修改</a>'
                );
            }
        }
    ];
    tips.bootstrapTable(config);


    function refresh() {
        $('#table').bootstrapTable('refresh');
    }


    var layerIndex;
    $(document).on('click', '#addBtn', function () {

        layerIndex = layer.open({
            type: 1,
            title: '添加商品分类',
            area: ['40%', '40%'],
            content: units.buildHtml()
        });
    });


    $(document).on('click', '#addYes', function () {

        var id = $(this).data('id');
        var formObj = tips.getFormValues("#addForm");
        $.extend(formObj, {image: $("#imgView").find("img").attr('src')});
        var type, url;
        if (id) { //修改
            type = 'put';
            url = '/admin/product/type/' + id;
        } else {
            type = 'post';
            url = '/admin/product/type';
        }
        
        $.ajax({
            type: type,
            url: url,
            data: formObj,
            success: function (result) {
                if (result.status === true) {
                    layer.close(layerIndex);
                    layer.msg(result.message, {icon: 6, time: 3000});
                    refresh();
                } else {
                    layer.alert(result.message, {icon: 5});
                }
            },
            error: function () {
                layer.alert('异步请求失败');
            }
        });
    });


    $(document).on('change', '[name="file"]', function () {
        var formData = new FormData();
        formData.append('file', $(this)[0].files[0]);
        $.ajax({
            url: '/admin/tool/upload',
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            success: function (result) {
                console.log(result);
                if (result.status === true) {
                    var imgView = $("#imgView");
                    imgView.css('display', '');
                    imgView.find("img").attr('src', result.data.real)
                } else {
                    layer.alert(result.message);
                }
            }
        });
    });


    $(document).on('click', '#fileTrigger', function () {
        $("[name='file']").trigger('click');
    });

    var units = {

        buildHtml: function (title) {

            if (title === undefined) {
                title = '';
            }
            return '<div class="ibox float-e-margins" style="height: 100px">' +
                    '        <div class="ibox-content">' +
                    '            <form class="form-horizontal" id="addForm" enctype="multipart/form-data">' +
                    '                <div class="form-group">' +
                    '                    <label class="col-sm-3 control-label">名称：</label>' +
                    '                    <div class="col-sm-8">' +
                    '                        <input type="text" placeholder="请输入名称" class="form-control" name="title" value="' + title + '">' +
                    '                    </div>' +
                    '                </div>' +
                    '                <div class="form-group" id="imgView" style="display: none">' +
                    '                    <div class="col-sm-8 col-sm-offset-3">' +
                    '                       <img src="" style="width: 75px;height: 75px">' +
                    '                    </div>' +
                    '                </div>' +
                    '                <div class="form-group">' +
                    '                    <label class="col-sm-3 control-label">图片：</label>' +
                    '                    <div class="col-sm-8">' +
                    '                        <button class="btn btn-md btn-warning" type="button" id="fileTrigger" data-id="">文件上传</button>' +
                    '                        <input type="file" name="file" style="display: none">' +
                    '                    </div>' +
                    '                </div>' +
                    '                <div class="form-group">' +
                    '                    <div class="col-sm-offset-3 col-sm-8">' +
                    '                        <button class="btn btn-md btn-success" type="button" id="addYes" data-id="">确定</button>' +
                    '                    </div>' +
                    '                </div>' +
                    '            </form>' +
                    '        </div>' +
                    '    </div>';
        },
        modify: function (_this, id) {
            var temp = $(_this).parent().prev();
            layerIndex = layer.open({
                type: 1,
                title: '修改商品分类',
                area: ['40%', '40%'],
                content: units.buildHtml(temp.prev().prev().text()),
                success: function () {
                    var srcAddr = temp.prev().find('img').attr('src');
                    if (srcAddr) {
                        var imgView = $("#imgView");
                        imgView.css('display', '');
                        imgView.find("img").attr('src', srcAddr);
                    }
                    $("#addYes").data('id', id);
                }
            });
        }
    };

</script>
{{end}}